$(document).ready(function() {
	chrome.storage.local.get('state').then(res => {
		let btn1 = '#openBtn',
			btn2 = '#closeBtn';
		if (!res.state) {
			btn1 = btn2;
			btn2 = '#openBtn';
		}

		$(btn1).prop("disabled", true).removeClass('btn-outline-primary').addClass('btn-primary');
		$(btn2).prop("disabled", false).addClass('btn-outline-primary').removeClass(
			'btn-primary');
	});


	$("#openBtn").click(function() {
		let disabled = $(this).prop("disabled");
		if (disabled) {
			return;
		}

		chrome.action.setBadgeText({
			text: 'ON',
		});

		chrome.storage.local.set({
			state: true
		});

		$(this).prop("disabled", true).removeClass('btn-outline-primary').addClass('btn-primary');
		$("#closeBtn").prop("disabled", false).addClass('btn-outline-primary').removeClass(
			'btn-primary');

	});

	$("#closeBtn").click(function() {
		let disabled = $(this).prop("disabled");
		if (disabled) {
			return;
		}

		chrome.action.setBadgeText({
			text: 'OFF',
		});

		chrome.storage.local.set({
			state: false
		});

		$(this).prop("disabled", true).removeClass('btn-outline-primary').addClass('btn-primary');
		$("#openBtn").prop("disabled", false).addClass('btn-outline-primary').removeClass(
			'btn-primary');

	});

	$("#top-bar-setting").click(function() {
		$("#rules_dialog").addClass('show d-block');
		$("#rules_modal_backdrop").addClass('d-block');

		$("#app").width("500px");
	});

	$("#rules_modal_close").click(function() {
		$("#rules_dialog").removeClass('show d-block');
		$("#rules_modal_backdrop").removeClass('d-block');

		$("#app").width("270px");
	});

	$("#rules_btn_add").click(function() {
		refreshForm();
		$("#rules_modal_add").modal("show");
	});

	$("#rules-btn-elem-add").click(function() {
		var elem = $("#rules-form-elem").val();
		if (!elem) {
			return;
		}

		var elemVal = $("#rules-form-elem-val").val();
		var elems = elemVal.split(";");
		if (elems.indexOf(elem) > -1) {
			return;
		}

		elems.push(elem);

		if (elems[0] === '') {
			elems.splice(0, 1);
		}

		$("#rules-form-elem-val").val(elems.join(";"));

		$("#rules-form-elem-label").append('<span class="badge badge-secondary rules-form-elem">' +
			elem + '</span>');
	});

	$("#rules-form-elem-label").on("click", ".rules-form-elem", function() {

		var val = $(this).text();
		var elemVal = $("#rules-form-elem-val").val();
		var elems = elemVal.split(";");
		var index = elems.indexOf(val);
		if (index > -1) {
			elems.splice(index, 1);
		}
		$("#rules-form-elem-val").val(elems.join(";"));
		$(this).remove();
	});

	$("#rules-btn-save").click(function() {
		var id = $("#rules-form-elem-id").val();
		var url = $("#rules-form-url-input").val();
		var elemVal = $("#rules-form-elem-val").val();

		if (!url || !elemVal || elemVal === '') {
			return;
		}

		var rule = {
			id: id,
			url: url,
			elems: elemVal.split(";")
		};

		if (id === '') {
			rule.id = generateUUID();
		}

		chrome.storage.local.get('rules').then(res => {
			var rules = [];
			if (res.rules) {
				rules = res.rules;
			}
			if (id) {
				for (var rl of rules) {
					if (rl.id === id) {
						rl.url = rule.url;
						rl.elems = rule.elems;
						break;
					}
				}
			} else {
				rules.push(rule);
			}
			chrome.storage.local.set({
				rules: rules
			}, function() {
				refreshForm();
				$("#rules_modal_add").modal("hide");
				refreshRuleTable();
			});
		});
	});

	refreshRuleTable();


	$("#table").on("click", ".edit", function() {

		var id = $(this).data('id');

		chrome.storage.local.get('rules').then(res => {

			refreshForm();
			$("#rules_modal_add").modal("show");

			if (res.rules) {
				for (var rule of res.rules) {
					if (rule.id === id) {

						$("#rules-form-elem-id").val(id);
						$("#rules-form-url-input").val(rule.url);
						$("#rules-form-elem-val").val(rule.elems.join(";"));

						for (var elem of rule.elems) {
							$("#rules-form-elem-label").append(
								'<span class="badge badge-secondary rules-form-elem">' +
								elem + '</span>');
						}

						break;
					}
				}
			}
		});


	});

	$("#table").on("click", ".remove", function() {

		var id = $(this).data('id');

		chrome.storage.local.get('rules').then(res => {

			if (res.rules) {
				for (var i = 0; i < res.rules.length; i++) {
					if (res.rules[i].id === id) {
						res.rules.splice(i, 1);
						break;
					}
				}

				chrome.storage.local.set({
					rules: res.rules
				}, function() {
					refreshRuleTable();
				});
			}
		});

	});
});

function refreshForm() {
	$("#rules-form-elem-id").val('');
	$("#rules-form-url-input").val('');
	$("#rules-form-elem-val").val('');
	$("#rules-form-elem-label").html('需要处理的元素：');
}

function refreshRuleTable() {

	chrome.storage.local.get('rules').then(res => {
		var ruleData = [];
		if (res.rules) {
			ruleData = res.rules;
		}

		$("#table").bootstrapTable('destroy').bootstrapTable({
			columns: [
				[{
						field: 'url',
						title: '网址',
						align: 'center'
					},
					{
						field: 'elems',
						title: '元素',
						align: 'center',
						formatter: function(value, row, index) {
							return row.elems.join(",");
						}
					},
					{
						field: 'id',
						title: '操作',
						width: 100,
						align: 'center',
						formatter: function(value, row, index) {
							return '<a class="edit" href="#" title="编辑" data-id="' + value +
								'"><i class="fa fa-edit"></i></a>  ' +
								'<a class="remove" href="#" title="删除" data-id="' + value +
								'"><i class="fa fa-trash"></i></a>'

						}
					}
				]
			],
			data: ruleData
		})
	});

}

function generateUUID() {
	var d = new Date().getTime();
	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
		var r = (d + Math.random() * 16) % 16 | 0;
		d = Math.floor(d / 16);
		return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
	});
}